<template>
  <div>
     <a-spin :spinning="spinning">
      <a-card :bordered="false" :bodyStyle="{ height: '100%', padding: '16px', position: 'relative' }">
        <div class="radio-box">
          <a-radio-group v-model="selRadio">
            <a-radio-button :value="item.id" v-for="(item, index) in radioList" :key="index">{{
              item.name
            }}</a-radio-button>
          </a-radio-group>
        </div>
        <div v-if="selRadio == 1" class="mt25">
          <brand-and-school :topTitle="'品牌介绍'" bottomTips="机构详情" :info="info" @finish="save" />
        </div>
        <div v-if="selRadio == 2" class="mt25">
          <hot-course />
        </div>
        <div v-if="selRadio == 3" class="mt25">
          <teacher-team />
        </div>
        <div v-if="selRadio == 4" class="mt25">
          <star-students />
        </div>
        <div v-if="selRadio == 5" class="mt25">
          <brand-and-school :topTitle="'校区环境'" bottomTips="校区详情" :info="info" @finish="save" />
        </div>
        <div v-if="selRadio == 6" class="mt25">
          <activity-style />
        </div>
        <div v-if="selRadio == 7" class="mt25">
          <learn-materials />
        </div>
        <div v-if="selRadio == 8" class="mt25">
          <news />
        </div>
      </a-card>
    </a-spin >
    <!-- replace(/[\n\r]/g,'<br>') -->
  </div>
</template>

<script>
import { uploadPic } from '@/api/login'
// import {introSetting} from '@/api/organizationInfo'
import { introSetting, introGetSetting, environmentGetSetting,environmentSetting } from '@/api/websiteCreate'
import brandAndSchool from './child/brandAndSchool'
import hotCourse from './child/hotCourse'
import teacherTeam from './child/teacherTeam'
import starStudents from './child/starStudents'
import activityStyle from './child/activityStyle'
import learnMaterials from './child/learnMaterials'
import news from './child/news'

export default {
  components: { brandAndSchool, hotCourse, teacherTeam, starStudents, activityStyle, learnMaterials, news },
  data() {
    return {
      radioList: [
        {
          id: 1,
          name: '品牌内容',
        },
        {
          id: 2,
          name: '热门课程',
        },
        {
          id: 3,
          name: '师资团队',
        },
        {
          id: 4,
          name: '明星学员',
        },
        {
          id: 5,
          name: '校区环境',
        },
        {
          id: 6,
          name: '活动风采',
        },
        {
          id: 7,
          name: '学习资料',
        },
        {
          id: 8,
          name: '新闻动态',
        },
      ],
      selRadio: 1,
      leftorganizationDetails: [
        {
          type: 'text',
          content: `    杭州麦麦教育是一家包括青少年舞蹈培训、幼儿舞蹈培训、特长生舞蹈培训为一体的艺术培训中心<br/><br/>
本机构师资力量强大，拥有业内专业的各个舞种教师团队，教研团队。在幼儿舞蹈培训方面，积累了丰富的教学经验，有着独特的教学方案。<br/><br/>
所有课程均以小班制上课，即每班学员以八人为限。针对每个学员因材施教，保证每位学员透彻领悟动作要领，使每位学员在舞蹈的学习中都能切身体会到舞蹈的魅力，从而更加热爱舞蹈，学有所乐，学有所成。<br/><br/>
同时，本机构每年都会举办一场学员专场汇报演出，为您提供一个学习舞蹈，展示自我的平台，助您实现舞蹈的梦想`,
        },
      ],
      info: {
        cover_image: '',
        intro: '',
        details: '',
      },
      detailimg: [], //判断上传图片是否大于9张
      detailVideo: [],
      school_id: this.$store.state.user.school,
      spinning:false
    }
  },
  created() {
    if (this.$route.query.selRadio) {
      this.selRadio = this.$route.query.selRadio
    }
    // if(this.selRadio==1){
    //   this.getSet()
    // }
    // if(this.selRadio==5){
    //   debugger
    //   this.info={
    //     cover_image: '',
    //     intro: '',
    //     details: '',
    //   }
    // }
  },
  watch: {
    selRadio: {
      handler(newVal, oldVal) {
        if (newVal == 1) {
          this.getIntroSet()
        }
        if (newVal == 5) {
          this.getEnvironmentSet()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //品牌
    getIntroSet() {
      this.spinning=true
      introGetSetting({ school_id: this.school_id, key: 'brand_introduction' })
        .then((res) => {
          if (res.value) {
            this.info.cover_image = res.value.cover_image
            this.info.intro = res.value.intro
            this.info.details = res.value.info
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        }).finally(()=>{
          this.spinning=false
        })
    },
    //校区
    getEnvironmentSet() {
      this.spinning=true
      environmentGetSetting({ school_id: this.school_id, key: 'environment' })
        .then((res) => {
          if (res.value) {
            this.info.cover_image = res.value.cover_image
            this.info.intro = res.value.intro
            this.info.details = res.value.info
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        }).finally(()=>{
          this.spinning=false
        })
    },
    save() {
      let parmars = {}
        parmars.cover_image = this.info.cover_image
        parmars.intro = this.info.intro
        parmars.info = this.info.details
      if (this.selRadio == 1) {
        introSetting({ school_id: this.$store.state.user.school, key: 'brand_introduction', value: parmars })
          .then((res) => {
            this.$message.success('保存成功')
            this.getIntroSet()
          })
          .catch((err) => {
            this.$message.error(err.data.message || '保存失败')
          })
      }
      if (this.selRadio == 5) {
        environmentSetting({ school_id: this.$store.state.user.school, key: 'environment', value: parmars })
          .then((res) => {
            this.$message.success('保存成功')
            this.getEnvironmentSet()
          })
          .catch((err) => {
            this.$message.error(err.data.message || '保存失败')
          })
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';
.mt25 {
  margin-top: 25px;
}
.single-module {
  display: flex;
}
.preview-section {
  width: 320px;
  max-height: 600px;
  overflow-y: auto;
  padding: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background-color: #f0f2f5;
  .preview-section__title {
    width: 100%;
    height: 55px;
    text-align: center;
    background-size: 100% 100%;
    background-image: url('~@/assets/img/website/22.png');
    position: relative;
    .text {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translate(-50%);
      font-weight: 500;
    }
  }
  .preview-section__desc {
    min-height: 42px;
    line-height: 20px;
    padding: 10px 14px;
    background-color: #fff;
  }
  .preview-section__detail {
    max-height: 430px;
    min-height: 300px;
    margin-top: 10px;
    padding: 0 14px 14px;
    background-color: #fff;
    .detail__title {
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      font-weight: 500;
    }
    .detail__content {
      .insititution-list__item {
        line-height: 18px;
        color: #96a1ae;
        font-size: 13px;
        margin-bottom: 10px;
        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
      }
    }
  }
}
.edit-section {
  width: 628px;
  max-width: 628px;
  height: fit-content;
  border: 1px solid #e8e8e8;
  padding: 24px 0 0 24px;
  margin: 0 0 0 40px;
  .edit-section__content {
    max-height: calc(100vh - 380px);
    overflow: auto;
    .cover__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    .cover__content {
      .cover__content__img {
        display: flex;
      }
    }
  }
}
.img__inner {
  position: relative;
  .image {
    width: 223px;
    height: 114px;
    border-radius: 4px;
  }
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
  }
}
.cover__content__desc {
  margin-top: 10px;
  display: flex;
}
.edit-section__detail {
  margin-top: 16px;
  .detail__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .content {
    margin-top: 8px;
    position: relative;
    .content-item {
      width: 300px;
      margin-bottom: 12px;
      display: flex;
      position: relative;
    }
  }
  .operate {
    display: flex;

    .operate-item {
      margin-right: 5px;
      text-align: center;
      cursor: pointer;

      .operate-select-area-up {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: 1px dashed #e8e8e8;
        margin-bottom: 4px;
      }
      .text {
        text-align: center;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.edit-section__footer {
  height: 48px;
  line-height: 48px;
  padding-left: 24px;
  margin: 16px 0 0 -24px;
  border: none;
  border-top: 1px solid #e8e8e8;
}
.little-icon {
  position: absolute;
  right: -23px;
  top: 0;
  cursor: pointer;
}
.little-icon-down {
  position: absolute;
  right: -23px;
  top: 45px;
  cursor: pointer;
}
.little-icon-up {
  position: absolute;
  right: -23px;
  top: 24px;
  cursor: pointer;
}
.top {
  top: 24px !important;
}
</style>